/*
 * Copyright (c) 2022. China Mobile (SuZhou) Software Technology Co.,Ltd. All rights reserved.
 * Lakehouse is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *          http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */

.tabsOption {
  svg path {
    stroke-width: 1;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }

  .svg-1:hover path {
    stroke: rgba(51, 125, 255, 1);
    font-weight: 100;
    stroke-width: 1;
  }

  .ivu-tooltip-inner {
    margin-top: -17px;
  }

  .tabs-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;
    white-space: nowrap;
    position: relative;

    > .tabs-header {
      display: flex;
      flex-direction: row;
      transition: transform 0.3s ease-in-out;
      transform-origin: 0 0;

      > .tabs-item {
        padding: 4px 4px 4px 6px;
        margin-right: 10px;
        font-size: 13px;
        word-break: keep-all;
        white-space: pre;
        border-bottom: 2px solid #fff;

        > i {
          width: 22px;
          height: 22px;
          position: relative;
          top: 5px;
          margin-right: 0;
          font-size: 20px;

          > svg path {
            &:hover {
              cursor: pointer;
            }
          }
        }

        &:hover {
          color: rgba(51, 125, 255, 1);
          cursor: pointer;
        }

        .tab-label {
          &:hover {
            color: rgba(51, 125, 255, 1);
            cursor: pointer;
          }
        }
      }

      .tab-close {
        > i {
          top: 4px;
          left: 5px;
          font-size: 16px;

          svg path {
            fill: #333;
            stroke: #333;

            &:hover {
              fill: rgba(51, 125, 255, 1);
              cursor: pointer;
            }
          }
        }

        &:hover {
          > i {
            svg path {
              fill: rgba(51, 125, 255, 1);
              cursor: pointer;
            }
          }
          fill: rgba(51, 125, 255, 1);
          cursor: pointer;
        }
      }

      .tabs-active {
        border-bottom: 2px solid #337dff;
        color: #337dff;
      }

      .tabs-option {
        width: 76px;
        height: 24px;
        display: flex;
        margin-top: 4px;
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
        padding-left: 5px;

        > i {
          font-size: 12px;
          margin-left: 3px;
          padding-top: 10px;
        }

        > span {
          border: 1px solid #d9d9d9;
          background-color: rgba(255, 255, 255, 0);
          width: 20px;
          height: 20px;
          z-index: 1;

          &:hover {
            color: rgba(51, 125, 255, 1);
            border-color: rgba(51, 125, 255, 1);
            cursor: pointer;
            z-index: 3;
          }
        }
      }
    }

    .right-btn {
      margin-left: -1px;
    }

    .fold-btn {
      border: 1px solid #d9d9d9;
      background-color: rgba(255, 255, 255, 0);
      width: 30px;
      height: 30px;
      margin-left: 7px;
      line-height: 1.7;
      font-size: 12px;
      padding: 1px;
      margin-top: 2px;

      > i {
        font-size: 12px;
        margin-left: 3px;
        margin-bottom: 1px;
        padding: 0;
        margin-right: 2px;
      }

      &:hover {
        color: rgba(51, 125, 255, 1);
        border: 1px solid rgba(51, 125, 255, 1);
        cursor: pointer;
      }
    }

    .loading-spin {
      width: 16px;
      height: 16px;
      margin: auto;
      margin-top: -20px;
      margin-right: 5px;
      font-size: 20px;
      background: url(../../../../../public/assets/loading.gif);
      background-size: cover;
    }

    .contentClasses {
      display: flex;
      flex-direction: row;
      will-change: transform;
      transition: transform 0.3s ease-in-out;
    }
  }
}
